*{
	padding: 0;
	margin: 0;
}

html{
	height: 100%;
}

body{
	height: 100%;
	font-family: 'JetBrains Mono Medium';
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0e92b3;
}

.form-wrapper{
	width: 300px;
	background-color: rgb(41,45,62);
	color: #fff;
	border-radius: 2px;
	padding: 50px;
}

/* .form-wrapper .header{
	text-align: center;
	font-size: 35px;
	text-transform: uppercase;
	line-height: 100px;
} */

.form-wrapper .head{
	text-align: center;
	font-size: 125px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 100px;
}
svg {
    width: 100%;
    height: 100%;
  
  }
  
  .text {
    fill: none;
    stroke-width: 5;
    stroke-dasharray: 0 240;
    stroke-dashoffset: 0;
  }
  
  .text:nth-child(4n + 1) {
    stroke: rgb(39, 135, 238);
    animation: text1 4s ease-in-out forwards;
  }
  .text:nth-child(4n + 2) {
    stroke: rgb(47, 169, 92);
    animation: text2 4s ease-in-out forwards;
  }
  .text:nth-child(4n + 3) {
    stroke: rgb(249, 189, 56);
    animation: text3 4s ease-in-out forwards;
  }
  .text:nth-child(4n + 4) {
    stroke: rgb(235, 61, 50);
    animation: text4 4s ease-in-out forwards;
  }
  
  @keyframes text1 {
    100% {
      stroke-dashoffset: 1000;
      stroke-dasharray: 60 180;
    }
  }
  
  @keyframes text2 {
    100% {
      stroke-dashoffset: 1060;
      stroke-dasharray: 60 180;
    }
  }
  
  @keyframes text3 {
    100% {
      stroke-dashoffset: 1120;
      stroke-dasharray: 60 180;
    }
  }
  
  @keyframes text4 {
    100% {
      stroke-dashoffset: 1180;
      stroke-dasharray: 60 180;
    }
  }

.form-wrapper .input-wrapper input{
	background-color: rgb(41,45,62);
	border: 0;
	width: 100%;
	text-align: center;
	font-size: 15px;
	color: #fff;
	outline: none;
}

.form-wrapper .input-wrapper input::placeholder {
  text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper{
	background-image: linear-gradient(to right,#e8198b,#0eb4dd);
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  border-radius: 30px;
}

.form-wrapper .action{
	display: flex;
	justify-content: center;
}

.form-wrapper .action .btn{
	width: 60%;
	text-transform: uppercase;
	border: 2px solid #0e92b3;
	text-align: center;
	line-height: 50px;
	border-radius: 30px;
	cursor: pointer;
	transition: .2s;
}

.form-wrapper .action .btn:hover{
	background-color: #0e92b3;
}

.form-wrapper .icon-wrapper{
	text-align: center;
	width: 60%;
	margin: 0 auto;
	margin-top: 20px;
	border-top: 1px dashed rgb(146,146,146);
	padding: 20px;
}

.form-wrapper .icon-wrapper i{
	font-size: 20px;
	color: rgb(187,187,187);
	cursor: pointer;
	border: 1px solid #fff;
	padding: 5px;
	border-radius: 20px;
}

.form-wrapper .msg{
	text-align: center;
}

.form-wrapper .msg a{
	/* text-decoration: none; */
	color: #ff6f5c;
}

